We are going to be moving in another direction this time as indicated in the tail of the last installment of this series. We are going to develop the techniques required to do animation style graphics that might be used in games (this is what my son wants to do you know, and it is a good platform to continue to refine our skills). We left off last month introducing the following program:

    NOMAINWIN
    WindowWidth = 515
    WindowHeight = 303
    UpperLeftX = INT((DisplayWidth-WindowWidth)/2)
    UpperLeftY = INT((DisplayHeight-WindowHeight)/2)

graphicbox  #main.gfx, 10, 10, 480, 210
button      #main.go, "Go!",[go],UL, 385, 230, 105, 25

Open "Window Title" for Window as #main
    #main "trapclose [quit]"
    #main.gfx "down; fill White; flush"
    #main "font ms_sans_serif 10"

[loop]
    Wait

[quit]
    close #main : END

[go]
    #main.gfx "color white"
    #main.gfx "backcolor red"
    #main.gfx "up; goto 20 80; down; circlefilled 8"
    for x = 20 to 440 step 2
        #main.gfx "backcolor white"
        #main.gfx "up; goto ";x;" 80; down; circlefilled 8"
        #main.gfx "backcolor red"
        #main.gfx "up; goto ";x+2;" 80; down; circlefilled 8"
        for y = 1 to 1000 : next y
    next x
    wait

Let's talk about what is going on here as we begin to develop some of the techniques needed to do simple animation style graphics. At this point, you should be able to recognize what is going on in the first half of the program.

1. The window size is set, and placement is set to be centered. This code centers the window:

   
   

       UpperLeftX = INT((DisplayWidth-WindowWidth)/2)
       UpperLeftY = INT((DisplayHeight-WindowHeight)/2)
   

   It does this by taking the total width of the display (in pixels) and subtracting from it the width of the window we are creating, and then dividing this in half. That finds the upper left corner in the Y direction where the window will be placed. The same is done in the X direction using display height minus window height divided by two.

2. The window elements are placed (a graphicbox and a button)
3. The window is opened.
4. The close event is trapped (this is what is triggered when the user clicks the little "X" in the window's upper right corner.
5. The graphicbox is filled with white.
6. The default font is set.
7. A wait loop is setup at the label [loop].
8. Finally, the event handler (remember those) for the close event is coded just below the label [quit].

I hope that is all pretty clear when you look at the code. If not, I would encourage you to go back over the last three or four installments of this series.

The code that comes next, beginning at the [go] label is the event handler for the "go" command button. This is the heart of making the animation work. Before I go into the code, explaining it, let just consider what we need to do to make a red ball move across a white background. If you give it thought, you will find that the steps are pretty intuitive.

1. Draw a red ball at location x, y
2. Pause for a moment so that we can see the ball
3. Draw a white ball at location x, y (this erases the red ball)
4. Calculate a new value of x (x = x + distance to move)
5. Go back to step 1.

Well, that is the simple way to do this. In the code we are going to move a ball from the far left to the far right of the graphicbox. We actually begin by drawing the first initial red ball at the starting location, which in the case of our program above is 20, 80 (in the x and y directions respective). Notice that we can not just tell the circlefilled command where we want the circle. We must first position the pen at the location where we want the circle, and then the circlefilled command will draw at that location. Also notice that we must pick the pen up off of the screen to move it, and then put it down to draw. This is required. If you fail to do this, the pen movement (generated by the goto command) will cause a line to be drawn as it moves across the screen.

That just gets us ready to go. The next bit of code sets up a FOR-NEXT loop that will increment x from 20 (our starting position) to 440 in steps of 2 at a time. These are the graphic locations moving across the screen. In the loop we will draw a white circle over the red one, and then draw a red one shifted two pixels to the right. Here is the critical technique to remember when working with variables as part of graphics commands - the variable must remain outside of the graphic command string. We talked about this in an earlier installment, as well as a recent tip corner in the Liberty Basic Newsletter. Here is how it works:

If x = 50, writing the code to move the pen to location x, 80 would look like this:

	#main.gbox "goto ";x;" 80"

If you wrote it like this:

	#main.gbox "goto x 80"

Liberty basic will interpret it to mean location 0, 80 - since the x in the command string has no value and therefore no meaning. Notice also in the first form (the correct form) of the statement that there is a space after the word "goto", as well as before the number 80. These spaces are critical. If you miss these, LB will halt with an error when you run your code. You will see why when you consider how the string will look during runtime after Liberty Basic has put it together. If x is equal to 50 for instance, the code above (the correct form of the statement) will look like this:

	#main.gbox "goto 50 80"

If you had omitted the spaces in the command sting like this:

	#main.gbox "goto";x;"80"

Liberty Basic would have constructed the command string to look like this:

	#main.gbox "goto5080"

Executing this code would have caused Liberty Basic to stop in an error condition. So as you can see, the spaces are just the way we want them. If we missed one of them, we would run our parameters together causing problems.

Having examined the correct construct for the code, you should be able to recognize how the demo program is managing to move the red and white ball from the left to the right. The last little thing I do in the loop is nest a second FOR-NEXT loop which is designed to introduce a bit of a pause in the animation, so that the red ball does not fly across the screen.